/**
 * @Author: jipeng.Li
 * @Date: 2021-04-21 14:00:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-04-21 18:36:21
 * @Description: 油卡入口列表
 */

import React from 'react';
import { View, StyleSheet, Text, TouchableOpacity, Image } from 'react-native';
import {
  mainBgColorWhite,
  px2dp,
  fontColorCoffee,
  splitLineColorLightGray,
  mainBgColorLightGray
} from '../../../../common/styles';
import { iconWriteOffRecordItem } from '../../../../image';

const WriteOffRecordItem = (props) => {
  const {
    time = '',
    writeOffState = 0,
    lineText = {},
  } = props;

  const writeOffStyle = {
    0: {
      text: '未核销',
      container: styles.itemState,
      textStyle: styles.itemStateText
    },
    1: {
      text: '已核销',
      container: styles.itemUnState,
      textStyle: styles.itemUnStateText
    },
    2: {
      text: '已退款',
      container: styles.itemState,
      textStyle: styles.itemStateText
    },
  };

  return (
    <View style={styles.writeOffRecordItem}>
      <View style={styles.itemHead}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <Image
            source={iconWriteOffRecordItem}
            style={{
              width: px2dp(24),
              height: px2dp(24),
              marginRight: px2dp(10)
            }}
          />
          <Text style={styles.itemStateText}>{time}</Text>
        </View>
        <View style={writeOffStyle[writeOffState].container}>
          <Text style={writeOffStyle[writeOffState].textStyle}>{writeOffStyle[writeOffState].text}</Text>
        </View>
      </View>
      <View
        style={{
          flexWrap: 'wrap',
          flexDirection: 'row',
          paddingHorizontal: px2dp(24),
          paddingVertical: px2dp(20)
        }}
      >
        {
          Object.keys(lineText).map((value, index) => {
            return (
              <View style={styles.itemLine} key={`itemLineText${index}`}>
                <Text style={styles.itemText}>
                  <Text>
                    {value}
                    ：
                  </Text>
                  {lineText[value]}
                </Text>
              </View>
            );
          })
        }
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  writeOffRecordItem: {
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(16),
    justifyContent: 'space-between',
  },
  itemHead: {
    flexDirection: 'row',
    borderBottomWidth: px2dp(1),
    borderBottomColor: '#F0EFEF',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: px2dp(24),
    height: px2dp(85)
  },
  itemState: {
    width: px2dp(112),
    height: px2dp(45),
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(8),
    alignItems: 'center',
    justifyContent: 'center'
  },
  itemStateText: {
    fontSize: px2dp(24),
    color: '#999793'
  },
  itemUnState: {
    width: px2dp(112),
    height: px2dp(45),
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(8),
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: px2dp(1),
    borderColor: fontColorCoffee
  },
  itemUnStateText: {
    fontSize: px2dp(24),
    color: fontColorCoffee
  },
  itemLine: {
    width: '50%',
    height: px2dp(16 + 37),
    justifyContent: 'space-between',
  },
  itemText: {
    lineHeight: px2dp(16 + 37),
    color: '#999793',
    fontSize: px2dp(26),
  },
  itemTextKey: {
    color: '#999793',
    fontSize: px2dp(26),
  },
});

export default WriteOffRecordItem;
